<template>
  <div>
    <h3>欢迎光临水果店</h3>
    <h4>苹果10元/斤, 折扣8折 优惠</h4>
    <div>
      <span>请输入购买的斤数</span>
      <input type="number" v-model.number="count" />
    </div>
    <div>
      <button @click="btn">结账买单</button>
    </div>
    <div>
      结账单: 总价:<span>{{ total }}</span> 元------ 折后价:
      <span>{{ remainder }}</span
      >元 ------省了 : <span>{{ more }}</span> 元
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: "",
      total: "",
      remainder: "",
      more: "",
    };
  },
  methods: {
    btn() {
      this.total = this.count * 10;
      this.remainder = this.count * 8;
      this.more = this.total - this.remainder;
    },
  },
};
</script>

<style>
</style>